<template>
  <div class="list">
    <dl class="list-tab">
      <dt>我的订单</dt>
      <dd
        v-for="(item,index) in navList"
        :key="item.id"
        :class="{active: currentIndex == index}"
        @click="handleNavClick(item,index)"
      >
        {{ item.title }}
      </dd>
    </dl>

    <ul class="order-list">
      <li
        v-for="item in orderList"
        :key="item.id"
        class="order-item"
      >
        <h2 class="order-title">
          <i class="iconfont">&#xe70b;</i>
          订单编号：{{ item.orderId }}
          <span class="order-time">{{ item.gmtCreate }}</span>
         <!-- <i v-if="item.status != 0" @click="removeOrder(item.orderId)" class="iconfont delete" title="删除订单">&#xe622;</i> -->
        </h2>
        <div class="order-list-box">
          <dl>
            <dd class="order-content"  @click="toCourseDetail(item)">
              <div class="img-box">
                <img :src="item.cover" width="160" height="90" alt="">
              </div>
              <div class="order-name-box">
                <p class="order-name">
                  {{ item.courseName }}
                </p>
              </div>
            </dd>
          </dl>
          <div class="order-price-box">
            <template v-if="item.status == 1">
              <p class="price-item real">
                <span>{{`实付 ¥` + item.paid }}</span>
              </p>
            </template>
            <p v-else class="price-item real">
              <span>{{ `应付 ¥` + item.payable }}</span>
            </p>
          </div>
          <div class="order-status-box">
            <template v-if="item.status == 0">
              <p class="order-pay-btn" @click="toPay(item.orderId)">
                立即支付
              </p>
              <p class="order-cancel" @click="cancelOrder(item.orderId)">
                取消订单
              </p>
            </template>
            <template v-else-if="item.status == 1">
              <p class="order-status">
                {{ `已完成支付` }}
              </p>
              <p class="order-pay" v-if="item.paid === 0">
                {{ `免费课程` }}
              </p>
              <p class="order-pay" v-if="item.paid === 1">
                {{ `支付宝支付` }}
              </p>
            </template>
            <template v-else-if="item.status == 2">
              <p class="order-status">
                {{ `订单已关闭` }}
              </p>
            </template>
          </div>
        </div>
      </li>
    </ul>

    <div v-if="orderList.length === 0 || orderList === null" class="list-empty">
      <p>暂无订单记录</p>
    </div>

    <!-- 分页 -->
    <el-pagination
       :current-page="page"
       :page-size="limit"
       :total="total"
       style="padding: 30px 0; text-align: center;"
       layout="total, prev, pager, next, jumper"
       @current-change="fetchData"
    />
  </div>
</template>
<script>
  import {getOrderPageList, saveOrder, removeOrderById, cancelOrderById} from '@/api/order'
import { mapGetters } from 'vuex';
  import {queryPay} from '@/api/pay';

export default {
  data () {
    return {
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 5, // 每页记录数
      orderQuery: {
        userId: this.userId,
        status: ''
      },
      currentIndex: 0,
      navList: [],
      orderList: []
    }
  },
  created () {
    this.navList = [
      { id: 1, title: '全部', status: ''},
      { id: 2, title: '未支付', status: 0},
      { id: 3, title: '已完成', status: 1},
      { id: 4, title: '已关闭', status: 2},
    ]
    this.fetchData()
  },
  methods: {
    // 导航点击
    handleNavClick (item,index) {
      this.currentIndex = index
      this.orderQuery.status = item.status
      this.fetchData()
    },
    // 刷新数据
    fetchData(page = 1){
      // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
      // 解决分页无效问题
      this.page = page
      this.orderQuery.userId = this.userId
      // 获取用户订单列表
      getOrderPageList(this.page,this.limit,this.orderQuery).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.orderList = result.data.rows
          this.total = result.data.total
        }
      })
    },

    toPay(orderId){
      this.$confirm('将跳转至支付中心进行支付', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {
        this.$router.push('/pay/'+orderId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消支付！'
        });
      });
    },

    removeOrder(orderId){
      this.$confirm('将永久删除该订单, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return removeOrderById(orderId)
      }).then((result) => {
        let {code, data} = result
        if (code === 20000){
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.fetchData()
        }

      }).catch((result) => {
        if (result === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      })
    },
    cancelOrder(orderId){
      this.$confirm('将取消该订单, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return cancelOrderById(orderId)
      }).then((result) => {
        let {code, data} = result
        if (code === 20000){
          this.$message({
            type: 'success',
            message: '取消订单成功！'
          })
          this.fetchData()
        }

      }).catch((result) => {
        if (result === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        }
      })
    },

    //新窗口至课程详情
    toCourseDetail(item){
      let url = this.$router.resolve({
        path: '/course/'+item.courseId,
      });
      window.open(url.href, '_blank')
    }
  },
  computed: {
    ...mapGetters({
      'userId': 'id'
    })
  },
}
</script>

<style lang="stylus" scoped>
  .list
    .list-tab
      dt, dd
        display: inline-block;
        vertical-align: middle;
      dt
        position: relative;
        margin-right: 20px;
        padding-right: 20px;
        font-size: 16px;
        color: #07111b;
        line-height: 32px;
        font-weight: 700;
        &::after
          content: '';
          position: absolute;
          right: 0;
          top: 6px;
          width: 1px;
          height: 20px;
          background-color: #d9dde1;
      dd
        padding: 10px 40px;
        font-size:12px;
        color: #5e5e5e;
        cursor: pointer;
        &:last-child
          float: right;
        &.active
          background-color: #4d555d;
          border-radius: 16px;
          color: #fff;
    .order-list
      margin-top: 24px;
      .order-item
        padding: 10px 32px 32px 32px;
        margin-bottom: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 8px 2px rgba(0,0,0,0.1);
        background-color: #fff;
        cursor: pointer;
        &:hover
          box-shadow: 0 2px 12px 4px rgba(0,0,0,0.1);
          .order-title
            .iconfont.delete
              display: block;
        .order-title
          margin-bottom: 24px;
          font-size: 12px;
          font-weight: 700;
          color: #333;
          line-height: 48px;
          border-bottom: 1px solid #b7bbbf;
          .iconfont
            margin-right: 5px;
            color: #f01414;
            &.delete
              display: none;
              float: right;
              color: #93999f;
          .order-time
            margin-left: 25px;
            color: #93999f;
        .order-list-box
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          position: relative;
          dl
            flex: 1;
            border-right: 1px solid #d9dde1;
            .order-content
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 24px;
              padding-bottom: 24px;
              border-bottom: 1px solid #d9dde1;
              &:last-child
                border-bottom: none;
                margin-bottom: 0px;
                padding-bottom: 0px;
              .img-box
                flex: 0 0 160px;
                width: 160px;
              .order-name-box
                flex: 1;
                margin-left: 20px;
                text-align: left;
                height: 90px;
                .order-name
                  margin-bottom: 8px;
                  color: #07111b;
                  line-height: 24px;
                .order-real-price
                  font-size: 12px;
                  color: #f01414;
          .order-price-box
            flex: 0 0 160px;
            width: 200px;
            padding-right  20px
            text-align: center;
            line-height 50px
            font-size: 14px;
            color: #93999f;
          .order-status-box
            flex: 0 0 200px;
            width: 200px;
            text-align: left;
            font-size: 12px;
            color: #93999f;
            & > p
              line-height: 24px;
          .order-price-box
            margin-right: 200px;
            padding-top: 10px;
            padding-left: 20px;
            box-sizing: border-box;
            .old
              text-decoration: line-through;
            .real
              & > span
                margin-left: 5px;
                display: inline-block;
                vertical-align: middle;
                font-size: 16px;
              color: #f01414;
          .order-status-box
            padding-top: 20px;
            text-align: center;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            border-left: 1px solid #d9dde1;
            .order-status
              font-size: 14px;
              color: #4d555d;
            .order-pay-btn
              margin: 0px auto 5px;
              width:120px;
              height:36px;
              border-radius: 18px;
              background-color: #f01414;
              color: #fff;
              text-align: center;
              line-height: 36px;
  .list-empty
    padding: 10px 0;
    text-align: center;
</style>
